// components/customBar/index.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {

  },

  /**
   * 组件的初始数据
   */
  data: {
      active: 0,   //切换控制器
      list: [
        {
          url: "/pages/index/index",
          icon: "../assets/image/startTab.png",
          active: "../assets/image/startTab1.png",
          text: "开始诊断",
        },
        {
          url: "/pages/articl/list/index",
          icon: '../assets/image/recordTab.png',
          active: "../assets/image/recordTab1.png",
          text: "医学文章",
        },
        {
          url: "/pages/user/index",
          icon: "../assets/image/userTab.png",
          active: "../assets/image/userTab1.png",
          text: "我的",
        }
      ]
  },

  /**
   * 组件的方法列表
   */
  methods: {
      onChange: function (e) {
          var that = this;
          let list = that.data.list;
          that.setData({
              active: e.detail,
          });
          wx.switchTab({
              url: list[e.detail].url,
          })
      },
      init() {
          const page = getCurrentPages().pop();
          console.log(page);
          this.setData({
              active: this.data.list.findIndex(item => item.url === `/${page.route}`)
          });
      }
  }
})


/**
*  总结：
*      1.使用 onChange 函数 已经能简单 实现点击跳转页面的功能，但是图标的选中状态出现混乱，
*          1.1 为解决此问题，需要通过在引用组件页面的 js 中的 onshow 生命周期中调用 this.getTarBar().init()方法
*          1.2 思考：为什么需要在引用组件页面的js 中的 onshow 生命周期中引用 init方法 ?
*          1.3 分析 ：
*                  数组的 pop() 方法 ： 移除数组的最后一个元素，并返回该元素
*                  findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
*                  1.3.1 了解下 init()方法内的执行语句：
*                        声明变量存放 获取到的当前页面路径
*                        page.route 跳转到当前页面 === item.url   如果符合条件则返回index
*                        将此下标 setData 给 active
*
*
*
*       2. 虽然在 app.json 文件中已经开启自定义 tabBar 声明 ,  但也还是需要在 tabBar-list 中将目标页面设置到 pagePath 中
*	        否则使用 api - wx.switchTab 报错且无法跳转
*/